<template>
  <el-card class="tree-card">
    <!-- 用了一个行列布局 -->
    <TreeTools :node-data="conmInfo" :is-company="true" />
    <hr>
    <el-tree
      :data="depts"
      :props="{label:'name'}"
      :default-expand-all="true"
    >
      <template #default="scoped">
        <TreeTools :node-data="scoped.data" @addDepts="addDepts" @updataList="updataPage" @editDepts="editDepts" />
      </template>
    </el-tree>
    <addDepts ref="addDepts" :node-data="nodeData" :is-show-dialog="isShowDialog" @updataPage="updataPage" @addDepts="addDeptsNo" />
  </el-card>
</template>

<script>
import addDepts from './components/add-depts.vue'
import { listTotreeData } from '@/utils/index'
import TreeTools from './components/tree-tools.vue'
import { getDepartment } from '@/api/department'
export default {
  components: {
    TreeTools,
    addDepts
  },
  data() {
    return {
      conmInfo:
        {
          name: '江苏传智播客教育科技股份有限公司',
          manager: '负责人'
        },

      depts: [],
      isShowDialog: false,
      nodeData: {}
    }
  },
  created() {
    this.updataPage()
  },
  methods: {
    async updataPage() {
      const { depts } = await getDepartment()
      console.log(64, depts)
      this.depts = listTotreeData(depts, '')
    },
    addDepts(nodeData) {
      this.isShowDialog = true
      this.nodeData = nodeData
    },
    addDeptsNo() {
      console.log(123)
      this.isShowDialog = false
    },
    editDepts(nodeData) {
      this.isShowDialog = true
      this.$refs.addDepts.getDeptsDetail(nodeData)
    }
  }
}
</script>

<style  scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
